﻿@using ZhongKeSite.Entity;
@model InnovateInfo
@{ 
    Expert expert = new Expert();
    if(Model.ExpertList.Count > 0)
    {
        expert = Model.ExpertList.FirstOrDefault();
    }
}
<div class="banner banner-contact wow fadeInUp">
    <div class="container">
        <h1 class="title-page">创新</h1>
        <p class="des">与我们一起探索未来农业更多可能</p>
    </div>
</div>
<div class="page page-innovate">
    <section class="s1 container">
        <div class="inn-list">
            <div class="row r1">
                @if (Model.NewsFirst != null)
                {
                    <div class="col-md-auto">
                        <div class="item first">
                            <img src="@Model.NewsFirst.CoverImage" alt="">
                            <div class="box-bg">
                                <div class="txt">
                                    <h3 class="title"><a href="/detail?id=@Model.NewsFirst.ID">@Model.NewsFirst.Title</a></h3>
                                    <time>@Model.NewsFirst.PublishDate.Value.ToString("yyyy.MM.dd")</time>
                                    <p class="des">@Model.NewsFirst.Remark</p>
                                </div>
                            </div>
                        </div>
                    </div>
                }
                @if (Model.NewsSecond != null)
                {
                    <div class="col-md">
                        <div class="item item2">
                            <img src="@Model.NewsSecond.CoverImage" alt="">
                            <div class="txt">
                                <h3 class="title"><a href="/detail?id=@Model.NewsSecond.ID">@Model.NewsSecond.Title</a></h3>
                                <time>@Model.NewsSecond.PublishDate.Value.ToString("yyyy.MM.dd")</time>
                                <p class="des">@Model.NewsSecond.Remark</p>
                            </div>
                        </div>
                    </div>
                }
            </div>
            <div class="row">
                @if (Model.NewsThird != null)
                {
                    <div class="col-md-auto">
                        <div class="item item3">
                            <img src="@Model.NewsThird.CoverImage" alt="">
                            <div class="txt">
                                <h3 class="title"><a href="/detail?id=@Model.NewsThird.ID">@Model.NewsThird.Title</a></h3>
                                <time>@Model.NewsThird.PublishDate.Value.ToString("yyyy.MM.dd")</time>
                                <p class="des">@Model.NewsThird.Remark</p>
                            </div>
                        </div>
                    </div>
                }
                <div class="col-md">
                    <div class="item">
                        @if (Model.NewsFour != null)
                        {
                            <div class="item4">
                                <div class="row">
                                    <div class="col-auto order-lg-last"><img src="@Model.NewsFour.CoverImage" alt=""></div>
                                    <div class="col">
                                        <div class="txt txt1">
                                            <h3 class="title"><a href="/detail?id=@Model.NewsFour.ID">@Model.NewsFour.Title</a></h3>
                                            <time>@Model.NewsFour.PublishDate.Value.ToString("yyyy.MM.dd")</time>
                                            <p class="des">@Model.NewsFour.Remark</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }

                        @if (Model.NewsFive != null)
                        {
                            <div class="item5">
                                <div class="row">
                                    <div class="col-auto order-lg-last"><img src="@Model.NewsFive.CoverImage" alt=""></div>
                                    <div class="col">
                                        <div class="txt txt1">
                                            <h3 class="title"><a href="/detail?id=@Model.NewsFive.ID">@Model.NewsFive.Title</a></h3>
                                            <time>@Model.NewsFive.PublishDate.Value.ToString("yyyy.MM.dd")</time>
                                            <p class="des">@Model.NewsFive.Remark</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
        <footer class="more"><a href="/innlist">查看更多</a></footer>
    </section>
    <section class="s2">
        <div class="container">
            <div class="title-section">
                <h2>了解我们的专家</h2>
            </div>
        </div>
        <div id="teamlist">
            <div class="row no-gutters">
                @foreach (var item in Model.ExpertList)
                {
                    <div class="col-6 col-md-4 col-lg-3 col-xl-2">
                        <div class="item" data-id="@item.ID">
                            <img src="@item.AvatarImage" alt="">
                            <div class="name">@item.ExpertName</div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </section>
    <div class="userinfo" id="userinfo">
        <div class="content">
            <a class="btn-close" id="btn-close" href="javascript:void(0);"> <i class="iconfont iconsearchclose"></i></a>
            <div class="row">
                <div class="col-md-auto">
                    <div class="pic"><img id="avatar" src="@expert.AvatarImage" alt=""></div>
                </div>
                <div class="col-md">
                    <div class="info">
                        <h2 class="name text60" id="expertName">@expert.ExpertName</h2>
                        <h3 class="text20" id="position">@expert.Education  I  @expert.Position</h3>
                        <p id="expertDesc">@expert.Description</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section scripts {
    <script>
        $(function () {
            $("#btn-close").click(function (e) {
                $("#userinfo").fadeOut();
            })

            $("#teamlist .item").click(function (e) {
                var id = $(this).data("id");
                $.get('/getexpert?id=' + id, function (res) {
                    console.log(res);
                    if (res.success) {
                        var data = res.data;
                        $("#avatar").attr("src", data.AvatarImage);
                        $("#expertName").html(data.ExpertName);
                        $("#position").html(data.Education + ' | ' + data.Position);
                        $("#expertDesc").html(data.Description);
                    }
                });

                $("#userinfo").fadeIn();
            });

        });
    </script>
}